<template>
  <div class="settle">
    <div class="checkAll">
      <input type="checkbox"
             @click="checkAll($event)" /><span>全选</span>
    </div>
    <div class="amt">
      <span>合计</span>
      <span>¥{{amt}}</span>
    </div>
    <div class="toOrder">
      <div class="bn">结算</div>
    </div>
  </div>
</template>

<script>
import bus from '@/components/bus'
export default {
  data () {
    return {
      goods: [],
      amt: 0
    }
  },
  created () {
    var that = this;
    bus.$on('getData', (obj) => {
      that.goods[obj.index].checked = obj.checked;
      that.getAmt();
    })
  },
  methods: {
    getAmt () {
      var amt1 = this.goods.filter((obj) => obj.checked == true).reduce((amt, obj) => {
        return amt += obj.goods_price * obj.goods_count
      }, 0);
      this.amt = amt1;
    },
    checkAll (e) {
      this.goods.forEach((obj) => {
        obj.checked = e.target.checked;
      })
      this.getAmt()
      bus.$emit('checkAll', e.target.checked)
    }
  }

}
</script>

<style lang="less" scoped>
.settle {
  width: 100%;
  height: 60px;
  line-height: 60px;
  position: fixed;
  bottom: 0px;
  background-color: rgb(255, 255, 255);
  display: flex;
  // justify-content: space-around;
}

.checkAll {
  width: 60px;
  margin-left: 5px;
}
.amt {
  width: 100px;
  margin-left: 45px;
}
.toOrder {
  width: 100px;
  margin-left: 25px;
}
.bn {
  border-radius: 50px;
  margin-top: 10px;
  text-align: center;

  line-height: 40px;
  height: 40px;
  background-color: rgb(36, 120, 249);
}
</style>